import type { RefreshLoaderProps } from './types'

export function styles(props: RefreshLoaderProps): string {
  return `
.refresh-loader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: ${props.overlayColor} !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  pointer-events: none !important;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.refresh-loader.active {
  opacity: 1;
  pointer-events: auto !important;
}

.refresh-loader-spinner {
  width: ${props.spinnerSize}px !important;
  height: ${props.spinnerSize}px !important;
  border: 3px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50% !important;
  border-top-color: ${props.spinnerColor} !important;
  animation: refreshLoading 1s ease-in-out infinite !important;
  margin-bottom: 16px !important;
}

.refresh-loader-text {
  color: white !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-align: center !important;
}
`
}
